<!DOCTYPE html >
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
>
<head>
    <meta charset="UTF-8">
    <title>后台管理界面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" th:href="@{/css/font.css}" >
    <link rel="stylesheet" th:href="@{/css/xadmin.css}">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script th:src="@{/lib/layui/layui.js}"  charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/js/xadmin.js}"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>

<div class="layui-row layui-col-space10">
    <div class="layui-col-md2">
        <!--树形菜单-->
        <div id="test1"></div>
    </div>
    <div class="layui-col-md10">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input type="text" name="uname" id="search_uname"  required   placeholder="请输入用户名" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <div class="layui-input-inline">
                        <select name="gender" lay-verify="required">
                            <option value="M">男</option>
                            <option value="F">女</option>
                        </select>
                    </div>        </div>
                <div class="layui-input-inline">
                    <button type="submit" lay-submit lay-filter="login" class="layui-btn layui-btn-sm layui-btn-primary" >
                        <i class="layui-icon layui-icon-search"></i>
                    </button>

                </div>
                <div class="layui-input-inline">
                    <button type="submit" lay-submit lay-filter="add" class="layui-btn layui-btn-sm" >
                        <i class="layui-icon layui-icon-add-circle"></i>新增
                    </button>
                </div>
            </div>
        </form>
        <table id="demo" lay-filter="test"></table>
    </div>

</div>

</body>
<script type="text/html" id="barDemo">
    <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="view">查看</button>

    <button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="edit">修改</button>

    <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del">删除</button>
</script>
<script>
    layui.use(['table','form'], function(){
        var table = layui.table;
        var form=layui.form;
        //第一个实例
        table.render({
            elem: '#demo'
            ,height: 612
            ,url: 'listpage' //数据接口
            ,page: true //开启分页
            ,cols: [
                [ //表头
                {field: 'uid', title: 'ID', width:80, sort: true, fixed: 'left'}
                ,{field: 'uname', title: '用户名', width:180}
                ,{field: 'upass', title: '密码', width:180, sort: true}
                ,{field: 'gender', title: '性别', width:180
                    ,templet:function (d) {
                        if(d.gender=="F"){
                            return "<span class=\"layui-badge\">女</span>";
                        }
                        else if(d.gender=="M"){
                            return "<span class=\"layui-badge layui-bg-blue\">男</span>"

                        }

                    }
                }
                ,{fixed: 'right',title: '操作', width:230, align:'center', toolbar: '#barDemo'}

            ]
            ]
        });

        //工具栏
        table.on('tool(test)',function(obj){
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            if(layEvent==='view'){
                x_admin_show("查看用户","toView?id="+data.uid,800,500);

            }
            if(layEvent==='edit'){
                x_admin_show("修改用户","toUpdate?id="+data.uid,800,500);
                return false;
            }
            //删除
            if(layEvent === 'del'){
                layer.msg("id="+data.uid+",uname="+data.uname);
                //访问数据库
                deleteUser(data.uid);
                //刷新表格
                table.reload("demo",{
                    url:"listpage"
                    ,where:{}
                    ,height: 312
                    ,url: 'list' //数据接口
                    ,page: true //开启分页
                })
            }
        })

        //定义表单触发事件
        form.on('submit(login)', function(data){
           //var search_uname=$("#search_uname").val();
            //AJax查询
            //刷新表格
            table.reload("demo",{
                url:"listparms"
                ,where:data.field
                ,height: 312
                ,page: true //开启分页
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        //弹窗口
        form.on('submit(add)', function(data){
            x_admin_show("添加用户","toAdd",800,500);
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    });

    /**
     * 删除用户
     * @param id
     */
    function deleteUser(id) {
        $.ajax({
            url:"delete/"+id,
            dataType:"json",
            async:false,
            success:function (data) {
                if(data.code==0){
                    layer.msg("删除成功");
                }
            }
        })
    }
</script>

<script>
    layui.use(['form','tree'], function(){
        $ = layui.jquery;
        var tree = layui.tree;
        var form = layui.form;

        $.ajax({
            url:"../menu_tree_ajax" ,
            dataType:"json",
            success:function (data) {
                var tree_data=data;
                //渲染
                var inst1 = tree.render({
                    elem: '#test1'  //绑定元素
                    ,id:"test1"
                    ,oncheck: function(obj){
                        console.log(obj.data); //得到当前点击的节点数据
                        console.log(obj.checked); //得到当前节点的展开状态：open、close、normal
                        console.log(obj.elem); //得到当前节点元素
                    }
                    ,showCheckbox:true
                    ,data:tree_data
                });
            }
        });


        //监听提交
        form.on('submit(add)', function(data){
            //获取树形的选中节点
            var checkData = tree.getChecked('test1');
            alert(checkData.length);
            return false;
        });
    });
</script>
</html>